<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入关键字" clearable style="width: 240px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          查询
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" size="mini" @click="jump('add')" v-hasPermi="['system:config:add']" style="margin: 20px 0">
      新增
    </el-button>
    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />

    <el-table v-loading="loading" :data="dataList" border>
      <el-table-column label="标题" prop="title" align="center" show-overflow-tooltip />
      <el-table-column label="产品说明" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.description | filterText }}
        </template>
      </el-table-column>
      <el-table-column label="商品介绍" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.intro | filterText }}
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center">
        <template slot-scope="scope">
          <el-image :src="baseUrl + scope.row.picture" :preview-src-list="[baseUrl + scope.row.picture]"
            style="width: 100px; height: 70px" />
        </template>
      </el-table-column>
      <el-table-column label="通用分类" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ getGeneralType(scope.row.cloudMarketGeneralClassification) }}
        </template>
      </el-table-column>
      <el-table-column label="行业分类" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ getIndustryType(scope.row.cloudMarketIndustryClassification) }}
        </template>
      </el-table-column>
      <el-table-column label="公司名称" prop="corporateName" align="center" show-overflow-tooltip />
      <el-table-column label="服务电话" prop="servicePhone" align="center" show-overflow-tooltip />
      <el-table-column label="服务邮箱" prop="serviceEmail" align="center" show-overflow-tooltip />
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">
            查看规格
          </el-button>
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:config:edit']"
          >
            编辑
          </el-button> -->
          <el-button size="mini" type="text" icon="el-icon-edit" @click="jump('update', scope.row)"
            v-hasPermi="['system:config:edit']">
            编辑
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['system:config:remove']">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.params.pageNum"
      :limit.sync="queryParams.params.pageSize" @pagination="getList" />

    <!-- 配置对话框 -->
    <!-- <el-dialog :title="form.marketId ? '修改配置' : '新增配置'" :visible.sync="open" width="50%" append-to-body
      :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="通用分类" prop="cloudMarketGeneralClassification">
              <el-select v-model="form.cloudMarketGeneralClassification" placeholder="请选择通用分类" style="width: 100%"
                clearable>
                <el-option v-for="i in generalList" :key="i.id" :label="i.name" :value="i.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="第三方企业" prop="corporateName">
              <el-input v-model="form.corporateName" placeholder="请输入公司名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务电话" prop="servicePhone">
              <el-input v-model="form.servicePhone" maxlength="11" placeholder="请输入服务电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="服务邮箱" prop="serviceEmail">
              <el-input v-model="form.serviceEmail" placeholder="请输入服务邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行业分类" prop="cloudMarketIndustryClassification">
              <el-select v-model="form.cloudMarketIndustryClassification" placeholder="请选择行业分类" style="width: 100%"
                clearable>
                <el-option v-for="i in industryList" :key="i.id" :label="i.name" :value="i.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="图片" prop="picture">
              <Image-upload v-model="form.picture" :limit="1" :isShowTip="false" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="核心功能" prop="core">
          <Editors v-model="form.core" :min-height="142" />
        </el-form-item>
        <el-form-item label="优势分析" prop="advantage">
          <Editors v-model="form.advantage" :min-height="142" />
        </el-form-item>
        <el-form-item label="产品说明" prop="description">
          <Editors v-model="form.description" :min-height="142" />
        </el-form-item>
        <el-form-item label="商品介绍" prop="intro">
          <Editors v-model="form.intro" :min-height="142" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog> -->

    <el-dialog title="规格" :visible.sync="skuShow" width="50%" append-to-body :close-on-click-modal="false">
      <el-button type="primary" size="mini" @click="handleSkuAdd" v-hasPermi="['system:config:add']"
        style="margin: 20px 0">
        新增
      </el-button>
      <el-table v-loading="skuLoading" :data="skuList" border>
        <el-table-column label="一级规格" prop="firstSkuName" align="center" show-overflow-tooltip />
        <el-table-column label="购买方式" align="center">
          <template slot-scope="scope">
            {{ scope.row.cloudMarketBuyingMethod | ctChargeType }}
          </template>
        </el-table-column>
        <el-table-column label="价格(元)" prop="price" align="center" show-overflow-tooltip />

        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleSkuUpdate(scope.row)"
              v-hasPermi="['system:config:edit']">
              编辑
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleSkuDelete(scope.row)"
              v-hasPermi="['system:config:remove']">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="skuTotal > 0" :total="skuTotal" :page.sync="skuParams.params.pageNum"
        :limit.sync="skuParams.params.pageSize" @pagination="getSkuList" />
    </el-dialog>
    <el-dialog :title="skuForm.marketSkuId ? '修改规格' : '新增规格'" :visible.sync="skuEditShow" width="500px" append-to-body :close-on-click-modal="false">
      <el-form ref="skuForm" :model="skuForm" :rules="skuRules" label-width="80px">
        <el-form-item label="一级规格" prop="firstSkuName">
          <el-input v-model="skuForm.firstSkuName" placeholder="请输入一级规格" />
        </el-form-item>
        <!-- <el-form-item label="二级规格" prop="secondSkuName">
          <el-input v-model="skuForm.secondSkuName" placeholder="请输入二级规格" />
        </el-form-item> -->
        <el-form-item label="购买方式" prop="cloudMarketBuyingMethod">
          <el-select v-model="skuForm.cloudMarketBuyingMethod" placeholder="请选择购买方式" style="width: 100%" clearable>
            <el-option v-for="i in skuMethodList" :key="i.value" :label="i.label" :value="i.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="价格(元)" prop="price">
          <el-input v-model="skuForm.price" placeholder="请输入价格" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSkuForm">确 定</el-button>
        <el-button @click="cancelSku">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listCloudConfig,
  listCloudType,
  addCloudConfig,
  updateCloudConfig,
  delCloudConfig,
  listCloudSku,
  addCloudSku,
  updateCloudSku,
  delCloudSku,
} from "@/api/configManagement/cloudMarketConfig";
export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      loading: false, // 遮罩层
      showSearch: true, // 显示搜索条件
      total: 0, // 总条数
      dataList: [], // 表格数据
      generalList: [], // 通用分类列表
      industryList: [], // 行业分类列表
      open: false, // 是否显示新建配置弹出层
      // 查询参数
      queryParams: {
        params: {
          pageNum: 1,
          pageSize: 10,
        },
        title: null,
      },
      form: {}, // 表单参数
      // // 表单校验
      // rules: {
      //   title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
      //   intro: [{ required: true, message: "商品介绍不能为空", trigger: "blur" }],
      //   description: [{ required: true, message: "产品说明不能为空", trigger: "blur" }],
      //   core: [{ required: true, message: "核心功能不能为空", trigger: "blur" }],
      //   advantage: [{ required: true, message: "优势分析不能为空", trigger: "blur" }],
      //   picture: [{ required: true, message: "图片不能为空", trigger: "blur" }],
      //   corporateName: [{ required: true, message: "公司名称不能为空", trigger: "blur" }],
      //   servicePhone: [
      //     { required: true, message: "服务电话不能为空", trigger: "blur" },
      //     {
      //       pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      //       message: "请输入正确的电话号码",
      //       trigger: "blur",
      //     },
      //   ],
      //   serviceEmail: [
      //     { required: true, message: "服务邮箱不能为空", trigger: "blur" },
      //     // 邮箱验证
      //     {
      //       pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
      //       message: "请输入正确的邮箱",
      //       trigger: "blur",
      //     },
      //   ],
      //   cloudMarketIndustryClassification: [
      //     { required: true, message: "行业分类不能为空", trigger: "blur" },
      //   ],
      //   cloudMarketGeneralClassification: [
      //     { required: true, message: "通用分类不能为空", trigger: "blur" },
      //   ],
      // },
      skuLoading: false, // 遮罩层
      skuShow: false, // 规格弹窗
      skuList: [], // 规格列表
      skuTotal: 0, // 规格总条数
      skuParams: {
        params: {
          pageNum: 1,
          pageSize: 10,
        },
        marketId: null, // 选中云市场ID
      },
      skuEditShow: false, // 规格编辑弹窗
      skuForm: {}, // 表单
      skuMethodList: [
        // 购买方式列表
        { label: "按次", value: "0" },
        { label: "按天", value: "1" },
        { label: "按月", value: "30" },
        { label: "按年", value: "365" },
      ],
      skuRules: {
        // 表单验证
        firstSkuName: [{ required: true, message: "一级规格不能为空", trigger: "blur" }],
        cloudMarketBuyingMethod: [
          { required: true, message: "购买方式不能为空", trigger: "blur" },
        ],
        price: [
          { required: true, message: "价格不能为空", trigger: "blur" },
          { pattern: /^(0\.\d+|[1-9]\d*(\.\d+)?)$/, message: "价格不能小于等于0" },
        ],
      }, // 规则
    };
  },
  created() {
    this.getTypeList();
    this.getList();
  },
  watch: {
    // 富文本框处理
    "form.description"(val) {
      if (val == "<p><br></p>" || val == "<p></p>") {
        this.form.description = "";
      }
    },
    "form.core"(val) {
      if (val == "<p><br></p>" || val == "<p></p>") {
        this.form.core = "";
      }
    },
    "form.advantage"(val) {
      if (val == "<p><br></p>" || val == "<p></p>") {
        this.form.advantage = "";
      }
    },
    "form.intro"(val) {
      if (val == "<p><br></p>" || val == "<p></p>") {
        this.form.intro = "";
      }
    },
  },
  methods: {
    /**跳转详情页 */
    jump(type, row) {
      if (type == 'update') {
        this.$router.push({
          path: `/configManagement/cloudMarketConfigUpdate`,
          query: {
            id: row.marketId
          }
        })
      } else {
        this.$router.push({
          path: `/configManagement/cloudMarketConfigAdd`,
        })
      }
    },
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      listCloudConfig(this.queryParams)
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取分类列表
    getTypeList() {
      listCloudType().then((res) => {
        this.generalList = res.data.cloudMarketGeneralClassification;
        this.industryList = res.data.cloudMarketIndustryClassification;
      });
    },
    // 通用分类名称
    getGeneralType(id) {
      let row = this.generalList.find((item) => item.id === id);
      return row ? row.name : "";
    },
    // 行业分类名称
    getIndustryType(id) {
      let row = this.industryList.find((item) => item.id === id);
      return row ? row.name : "";
    },
    // 取消按钮
    // cancel() {
    //   this.open = false;
    //   this.reset();
    // },
    // 表单重置
    // reset() {
    //   this.form = {
    //     marketId: null,
    //     title: "",
    //     intro: "",
    //     description: "",
    //     picture: "",
    //     corporateName: "",
    //     servicePhone: "",
    //     serviceEmail: "",
    //     cloudMarketGeneralClassification: "",
    //     cloudMarketIndustryClassification: "",
    //     advantage: "",
    //     core: "",
    //   };
    //   this.resetForm("form");
    // },
    // 表单重置
    resetSku() {
      this.skuForm = {
        marketSkuId: null,
        marketId: null,
        firstSkuName: null,
        secondSkuName: null,
        cloudMarketBuyingMethod: null,
        price: null,
      };
      this.resetForm("skuForm");
    },
    // 查看规格
    handleView(row) {
      this.skuParams.marketId = row.marketId;
      this.getSkuList();
    },
    // 取消弹窗
    cancelSku() {
      this.skuEditShow = false;
      this.resetSku();
    },
    // 查询云市场规格列表
    getSkuList() {
      this.skuLoading = true;
      listCloudSku(this.skuParams)
        .then((res) => {
          this.skuList = res.rows;
          this.skuTotal = res.total;
          this.skuShow = true;
        })
        .finally(() => {
          this.skuLoading = false;
        });
    },
    // 新增规格
    handleSkuAdd() {
      this.resetSku();
      this.skuForm.marketId = this.skuParams.marketId;
      this.skuEditShow = true;
    },
    // 修改规格
    handleSkuUpdate(row) {
      this.skuForm = Object.assign({}, row);
      this.skuEditShow = true;
    },
    // 提交规格表单
    submitSkuForm() {
      this.$refs["skuForm"].validate((valid) => {
        if (valid) {
          if (this.skuForm.marketSkuId) {
            updateCloudSku(this.skuForm).then((res) => {
              this.$modal.msgSuccess("修改成功");
              this.skuEditShow = false;
              this.getSkuList();
            });
          } else {
            addCloudSku(this.skuForm).then((res) => {
              this.$modal.msgSuccess("新增成功");
              this.skuEditShow = false;
              this.getSkuList();
            });
          }
        }
      });
    },
    // 删除规格
    handleSkuDelete(row) {
      this.$modal
        .confirm("是否确认删除一级规格【" + row.firstSkuName + "】？")
        .then(() => {
          delCloudSku([row.marketSkuId]).then(() => {
            this.getSkuList();
            this.$modal.msgSuccess("删除成功");
          });
        })
        .catch(() => { });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.params.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    // handleAdd() {
    //   this.reset();
    //   this.open = true;
    // },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form = Object.assign({}, row);
      this.open = true;
    },
    /** 提交按钮 */
    // submitForm() {
    //   this.$refs["form"].validate((valid) => {
    //     if (valid) {
    //       if (this.form.marketId) {
    //         updateCloudConfig(this.form).then((res) => {
    //           this.$modal.msgSuccess("修改成功");
    //           this.open = false;
    //           this.getList();
    //         });
    //       } else {
    //         addCloudConfig(this.form).then((res) => {
    //           this.$modal.msgSuccess("新增成功");
    //           this.open = false;
    //           this.getList();
    //         });
    //       }
    //     }
    //   });
    // },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm("是否确认删除【" + row.title + "】？")
        .then(() => {
          delCloudConfig([row.marketId]).then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          });
        })
        .catch(() => { });
    },
  },
};
</script>
